<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<!--<style>-->
<!--fieldset{-->
<!--width: 800px;-->
<!--margin: 0 auto;-->
<!--margin-top: 50px;-->
<!--}-->
<!--</style>-->
<body>
<div id="app">
    <!--<fieldset>-->
    <!--<legend>预约挂号</legend>-->
    <h3></h3>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="病人姓名" prop="bname" style="margin-left: 500px; margin-top: 60px;">
            <el-input v-model="ruleForm.bname" style="width: 200px;"></el-input>
        </el-form-item>

        <el-form-item label="病人年龄" prop="age" style="margin-left: 500px;">
            <el-input v-model="ruleForm.age" oninput="value=value.replace(/[^\d]/g,'')" style="width: 200px;"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex" style="margin-left: 500px;">
            <template>
                <el-radio v-model="ruleForm.sex" label="男">男</el-radio>
                <el-radio v-model="ruleForm.sex" label="女">女</el-radio>
            </template>
        </el-form-item>

        <el-form-item label="预约时间" required style="margin-left: 500px;">
            <el-col :span="11">
                <el-form-item prop="riqi">
                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.riqi" style="width: 200px;"></el-date-picker>
                </el-form-item>
            </el-col>
        </el-form-item>

        <!--<el-form-item label="预约时间" prop="riqi">-->
        <!--<el-input v-model="ruleForm.riqi"></el-input>-->
        <!--</el-form-item>-->

        <el-form-item label="选择医生" prop="iid" style="margin-left: 500px;">
            <el-select v-model="ruleForm.iid" placeholder="请选择医生" style="width: 200px;">
                <el-option v-for="(d,i) in docArr" :label="d.name" :value="d.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="选择科室" prop="kid" style="margin-left: 500px;">
            <el-select v-model="ruleForm.kid" placeholder="请选择科室" style="width: 200px;">
                <el-option v-for="(k,i) in kesArr" :label="k.kname" :value="k.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="病情简述" prop="text" style="margin-left: 500px;">
            <el-input
                    type="textarea"
                    placeholder="请描述病情"
                    v-model="ruleForm.text"
                    maxlength="30"
                    show-word-limit
                    style="width: 200px;"
            >
            </el-input>
        </el-form-item>

        <el-form-item label="挂号费用" prop="money" style="margin-left: 500px; width: 300px;">
            <el-select v-model="ruleForm.money" placeholder="请缴纳费用">
                <el-option v-for="(k,i) in kesArr" :label="k.money" :value="k.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item style="margin-left: 500px;">
            <el-button type="primary" @click="submitForm()">立即预约</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>

    <!--</fieldset>-->


</div>
<script>

    $.get("/ssm/doc/list",function (backData) {
        haha.docArr = backData.data;
    });
    $.get("/ssm/kes/list",function (backData) {
        haha.kesArr = backData.data;
    });
    // $.get("/ssm/kes/list",function (backData) {
    //
    // })

    var haha = new Vue({
        el:"#app",
        data:{
            ruleForm:{},
            docArr:[],
            kesArr:[],
            region: '',
            date1: '',
            date2: '',

            rules: {
                bname: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' },
                    { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' }
                ],
                sex: [
                    { required: true, message: '请选择性别', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请选择医生', trigger: 'blur' }
                ],
                kname: [
                    { required: true, message: '请选择科室', trigger: 'blur' }
                ],
                text: [
                    { required: true, message: '请输入病情', trigger: 'blur' },
                    { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
                ],
                riqi: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
            }
        },
        methods:{
            submitForm(){
                $.post("/ssm/doc/addGuahao",haha.ruleForm,function (backData) {
                    if( backData.code == 1 ){
                        // haha.$message.success('您已成功预约');
                        window.location.href = "/ssm/alibaba.html?haha.ruleForm.money="+haha.ruleForm.money
                    }else {
                        this.$message({
                            message: '预约失败，请重新预约',
                            type: 'error'
                        });
                    }
                });
            },
            resetForm(formName) {
                haha.$refs[formName].resetFields();
            }
        },
    });
</script>
</body>
</html>